<template>
  <div class="update_psw_page">
    <CommonHeader title="修改密码" />
    <div class="update_psw_content page_no_tab_bar">
      <!-- 旧密码 -->
      <div class="input_box">
        <div class="input_label">旧密码<span class="cut_text">*</span></div>
        <div class="input input_psw">
          <input
            :type="isViewPswObj.psw1 ? 'text' : 'password'"
            placeholder="请输入旧密码"
            v-model="ruleForm.oldPsw"
          />
          <div class="is_open" @click="isViewPswObj.psw1 = !isViewPswObj.psw1">
            <img
              v-if="!isViewPswObj.psw1"
              src="@/assets/login/close_icon.png"
              alt=""
            />
            <img v-else src="@/assets/login/open_icon.png" alt="" />
          </div>
        </div>
        <div class="input_rule">{{ rules.oldPsw.rule }}</div>
      </div>
      <!-- 新密码 -->
      <div class="input_box">
        <div class="input_label">新密码<span class="cut_text">*</span></div>
        <div class="input input_psw">
          <input
            :type="isViewPswObj.psw2 ? 'text' : 'password'"
            placeholder="请输入新密码"
            v-model="ruleForm.newPsw"
          />
          <div class="is_open" @click="isViewPswObj.psw2 = !isViewPswObj.psw2">
            <img
              v-if="!isViewPswObj.psw2"
              src="@/assets/login/close_icon.png"
              alt=""
            />
            <img v-else src="@/assets/login/open_icon.png" alt="" />
          </div>
        </div>
        <div class="input_rule">{{ rules.newPsw.rule }}</div>
      </div>
      <!-- 确认密码 -->
      <div class="input_box">
        <div class="input_label">确认新密码<span class="cut_text">*</span></div>
        <div class="input input_psw">
          <input
            :type="isViewPswObj.psw3 ? 'text' : 'password'"
            placeholder="请确认新密码"
            v-model="ruleForm.confirmPsw"
          />
          <div class="is_open" @click="isViewPswObj.psw3 = !isViewPswObj.psw3">
            <img
              v-if="!isViewPswObj.psw3"
              src="@/assets/login/close_icon.png"
              alt=""
            />
            <img v-else src="@/assets/login/open_icon.png" alt="" />
          </div>
        </div>
        <div class="input_rule">{{ rules.confirmPsw.rule }}</div>
      </div>
      <!-- 邮箱验证码 -->
      <div class="input_box">
        <div class="input_label">邮箱验证码<span class="cut_text">*</span></div>
        <div class="input input_psw">
          <input placeholder="请输入邮箱验证码" v-model="ruleForm.emailCode" />
          <div class="is_open add_text" @click="getCode">
            {{ curTime ? `${curTime}s` : "发送验证码" }}
          </div>
        </div>
        <div class="input_rule">{{ rules.emailCode.rule }}</div>
      </div>
      <!-- 谷歌验证码 -->
      <div class="input_box">
        <div class="input_label">谷歌验证码</div>
        <div class="input input_psw">
          <input
            :type="isViewPswObj.psw4 ? 'text' : 'password'"
            placeholder="请输入谷歌验证码"
            v-model="ruleForm.googleCode"
          />
          <div class="is_open" @click="isViewPswObj.psw4 = !isViewPswObj.psw4">
            <img
              v-if="!isViewPswObj.psw4"
              src="@/assets/login/close_icon.png"
              alt=""
            />
            <img v-else src="@/assets/login/open_icon.png" alt="" />
          </div>
        </div>
        <div class="input_rule"></div>
      </div>
      <!-- 确认按钮 -->
      <div class="operate_btn" @click="onConfirm">确认</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import CommonHeader from "@/components/CommonHeader.vue";
import { sendEmail, upPass } from "@/api/user";
import { ElMessage, ElMessageBox } from "element-plus";
import { useUserInfo } from "@/stores/userInfo";
import { useRouter } from "vue-router";

// 获取路由对象
const router = useRouter();
// 倒计时变量
const curTime = ref(0); // 倒计时
const isFlag = ref(true); // 控制频繁发送
// 获取用户信息
const user = useUserInfo();
// 是否查看密码
const isViewPswObj = ref({
  psw1: false,
  psw2: false,
  psw3: false,
  psw4: false,
});
// 表单数据
const ruleForm: any = ref({
  oldPsw: "",
  newPsw: "",
  confirmPsw: "",
  emailCode: "",
  googleCode: "",
});
// 表单验证
const rules: any = reactive({
  oldPsw: {
    msg: "请输入旧密码",
    rule: "",
  },
  newPsw: {
    msg: "请输入新密码",
    rule: "",
  },
  confirmPsw: {
    msg: "请输入确认新密码",
    rule: "",
  },
  emailCode: {
    msg: "请输入邮箱验证码",
    rule: "",
  },
});

// 获取验证码
const getCode = () => {
  if (curTime.value) return;
  if (!isFlag.value) return ElMessage.error("请勿频繁请求！");
  isFlag.value = false;

  // 请求邮箱验证码
  sendEmail({ email: user.userInfo.email, useTo: "3" }).then((res: any) => {
    downCount();
    ElMessage.success("获取验证码成功，请注意您的邮箱！");
  });
};

// 确认
const onConfirm = () => {
  if (validateForm()) {
    if (ruleForm.value.oldPsw == ruleForm.value.newPsw)
      return ElMessage.error("新密码不能和旧密码相同");
    if (ruleForm.value.newPsw != ruleForm.value.confirmPsw)
      return ElMessage.error("两次新密码不相同");

    // 组装数据
    const { emailCode, googleCode, newPsw } = ruleForm.value;
    let resData = {
      pwd: newPsw,
      emailCode,
      googleCode,
    };
    upPass(resData).then((res: any) => {
      ElMessage.success("修改密码成功！");
      ElMessageBox.confirm("您的账号密码已被修改，是否重新登录？", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          router.replace("/login");
          user.delUserInfo();
        })
        .catch(() => {
          router.replace("/home");
          user.delUserInfo();
        });
    });
  }
};

// 表单验证
const validateForm = () => {
  for (let k in rules) {
    // 验证是否为空
    if (ruleForm.value[k].trim() == "") {
      rules[k].rule = rules[k].msg;
      return false;
    }
  }
  for (let k in rules) {
    rules[k].rule = "";
  }
  return true;
};

// 验证码倒计时
const downCount = () => {
  let num = 60;
  curTime.value = num;
  let timer = setInterval(() => {
    if (num < 1) {
      clearInterval(timer);
      isFlag.value = true;
    } else {
      num--;
      curTime.value = num;
    }
  }, 1000);
};
</script>

<style lang="scss" scoped>
.update_psw_page {
  .update_psw_content {
    padding-top: 10px;
    .operate_btn {
      margin-top: 50px;
    }
  }
}
</style>
